<template>
  <div class="app-container">
    <div class="top">
      <el-form ref="form" :model="form" inline>
        <el-form-item label="综合查询" label-width="70px">
          <el-input v-model="form.name" @change="getListData()" clearable placeholder="ID/姓名/电话/身份证号" size="small" />
        </el-form-item>

        <el-form-item label="进度" :label-width="labelWidth">
          <el-select v-model="form.schedule" placeholder="请选择" size="small">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="保险" :label-width="labelWidth">
          <el-select v-model="form.bxIsBuy_ORDER" placeholder="请选择" size="small" @change="bxHand" clearable>
            <el-option label="已购买" value="0" />
            <el-option label="未购买" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="车型" :label-width="labelWidth">
          <el-input v-model="form.vehicle_type" clearable size="small" />
        </el-form-item>

        <el-form-item label="受理" :label-width="labelWidth">
          <el-select v-model="form.accept" placeholder="请选择" size="small">
            <el-option label="已受理" value="shanghai" />
            <el-option label="未受理" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="介绍人" label-width="70px">
          <el-input v-model="form.introducer" clearable size="small" />
        </el-form-item>

        <el-form-item label="招生人" :label-width="labelWidth">
          <el-input v-model="form.recruiter" clearable size="small" />
        </el-form-item>

        <el-form-item label="挂靠点" :label-width="labelWidth">
          <el-select v-model="form.be_affiliated" placeholder="请选择" size="small">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="报考类型" :label-width="labelWidth">
          <el-select v-model="form.type_examination" placeholder="请选择" size="small">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" :label-width="labelWidth">
          <el-input v-model="form.remark" clearable size="small" />
        </el-form-item>
        <el-form-item>
          <div @click="active = !active" style="color: #606266;cursor: pointer;">{{ active ? '收起更多' : '展开更多' }}</div>
        </el-form-item>

        <template v-if="active">
          <el-form-item label="科二教练" label-width="70px">
            <el-input v-model="form.subject2_coach" clearable size="small" />
          </el-form-item>

          <el-form-item label="科三教练" :label-width="labelWidth">
            <el-input v-model="form.subject3_coach" clearable size="small" />
          </el-form-item>

          <el-form-item label="日期类型" :label-width="labelWidth">
            <el-select v-model="form.date_type" placeholder="请选择日期类型" size="small">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>

          <el-form-item label="开始日期" :label-width="labelWidth">
            <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.start_end_date" type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束日期" :label-width="labelWidth">
            <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.start_end_date" type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="资料走向" label-width="70px">
            <el-input v-model="form.data_direction" clearable size="small" />
          </el-form-item>

          <el-form-item label="练车班别" :label-width="labelWidth">
            <el-input v-model="form.practice_class" clearable size="small" />
          </el-form-item>

          <el-form-item label="转入/转出" :label-width="labelWidth">
            <el-input v-model="form.in_out" clearable size="small" />
          </el-form-item>

          <el-form-item label="直营/挂靠" :label-width="labelWidth">
            <el-select v-model="form.sales_affiliated" placeholder="请选择" style="width: 202px" size="small">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>

          <el-form-item label="联系地址" label-width="112px">
            <el-input v-model="form.address" clearable size="small" />
          </el-form-item>

          <el-form-item label="签署合同" label-width="70px">
            <el-select v-model="form.sign_contract" placeholder="请选择" style="width: 202px" size="small">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
            <el-form-item label="查询模式" label-width="112px">
              <el-checkbox v-model="form.isExactQuery">模糊查询</el-checkbox>
            </el-form-item>
        </template>

      </el-form>
    </div>


    <div class="main">
      <el-tabs v-model="tabs" type="card" @tab-click="handleClick">
        <el-tab-pane :label="v.label" :name="v.name" v-for="(v, i) in studentJin" :key="i"></el-tab-pane>
      </el-tabs>
      <div class="zy">
        <div class="main_l">
          <el-button size="medium" type="primary" @click="inquire" icon="el-icon-search">查询</el-button>
          <el-button size="medium" type="success " icon="el-icon-plus">新增</el-button>
          <el-button size="medium" type="danger" class="el-icon-delete">删除</el-button>
          <el-button size="medium" type="info" plain @click="clearConditions">置空筛选条件</el-button>
        </div>
        <div class="main_r">
          <el-button size="medium" type="info" plain>归档</el-button>
          <el-button size="medium" type="info" plain>批量收银</el-button>
          <el-dropdown>
            <el-button size="medium" type="info" plain>
              批量打印<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item>双皮奶</el-dropdown-item>
              <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button size="medium" type="info" plain>
              批量设置<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item>双皮奶</el-dropdown-item>
              <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button size="medium" type="info" plain>导出</el-button>
          <el-button size="medium" type="info" plain>导出设置</el-button>
          <el-button size="medium" type="info" plain>视频演示</el-button>
          <el-button size="medium" type="info" plain @click="isShowScreenPopup = true">筛选</el-button>

          <!-- 筛选弹窗 -->
          <div class="screenPopup" v-show="isShowScreenPopup">
            <div class="quanxuan">
              <el-checkbox v-model="indeterminate" @change="handleCheckAllChange">全选</el-checkbox>
              <div style="margin: 15px 0;">
                <i class="el-icon-close" style="font-size: 12px;cursor: pointer;" @click="isShowScreenPopup = false"></i>
              </div>
            </div>

            <div class="item">
              <div v-for="(item, i) in columnControls" :key="i">
                <el-checkbox @change="handleCheckedCitiesChange(i)" :label="item.name" v-model="item.checked" :checked="item.checked"
                  :disabled="item.disabled">{{ item.name }}</el-checkbox>
              </div>
              <!-- <div class="screenPopup_btn" @click="screenPopupOK">确定</div> -->
            </div>
          </div>
        </div>
      </div>

      <div style="height: 525px;">
        <el-table ref="table" :data="tableData" border height="100%" :default-sort="{ prop: 'date', order: 'descending' }"
          v-if="isShowTable" :loading="loading">
          <el-table-column width="50" type="selection" align="center" />
          <el-table-column sortable prop="date" type="index" label="序号" width="80" align="center" />
          <el-table-column sortable prop="ID" label="ID" width="80" align="center">
            <template slot-scope="scope">
              <span style="color: blue;cursor: pointer;" @click="go(scope.row)">{{ scope.row.ID }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="name" label="姓名" width="150" align="center" />

          <el-table-column sortable prop="sex" :label="columnControls[0].name" v-if="columnControls[0].show" width="80"
            align="center" />

          <el-table-column sortable prop="car" :label="columnControls[1].name" v-if="columnControls[1].show" width="100"
            align="center" />

          <el-table-column sortable prop="statestr" :label="columnControls[2].name" v-if="columnControls[2].show"
            width="180" align="center" />

          <el-table-column sortable prop="newState" :label="columnControls[3].name" v-if="columnControls[3].show"
            width="200" align="center">
            <template slot="header">
              <el-tooltip placement="bottom">
                <span>状态<i class="el-icon-question"></i></span>
                <div slot="content">
                  <div slot="content" class="content">
                    <i class="dian"></i>
                    <span>未预约</span>
                  </div>
                  <div slot="content" class="content">
                    <i class="dian" style="background-color: #faad14;;"></i>
                    <span>已预约</span>
                  </div>
                  <div slot="content" class="content">
                    <i class="dian" style="background-color: #f53f3f;;"></i>
                    <span>未过关</span>
                  </div>
                  <div slot="content" class="content">
                    <i class="dian" style="background-color: #00b42a;;"></i>
                    <span>已过关</span>
                  </div>
                </div>
              </el-tooltip>
            </template>
            <template scope="scop">
              <div class="newState">
                <el-tag type="info" :class="['state-color-' + scop.row.k1state]">1</el-tag>
                <el-tag type="info" :class="['state-color-' + scop.row.k2state]">2</el-tag>
                <el-tag type="info" :class="['state-color-' + scop.row.k3state]">3</el-tag>
                <el-tag type="info" :class="['state-color-' + scop.row.k4state]">4</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column sortable prop="tel" :label="columnControls[4].name" v-if="columnControls[4].show" width="150"
            align="center" />

          <el-table-column sortable prop="beforecartype" :label="columnControls[5].name" v-if="columnControls[5].show"
            width="150" align="center" />

          <el-table-column sortable prop="idcard" label="身份证号" width="200" align="center" />

          <el-table-column sortable prop="money" label="应收" width="120" align="center" />

          <el-table-column sortable prop="act_money" label="实收" width="120" align="center" />

          <el-table-column sortable prop="lost_money" label="欠款" width="120" align="center" />

          <el-table-column sortable prop="moneyYH" label="优惠金额" width="120" align="center" />

          <el-table-column sortable prop="zkz" label="准考证" width="180" align="center" />

          <el-table-column sortable prop="supervisionOut" label="托管资金" width="120" align="center" />

          <el-table-column sortable prop="supervisionIn" label="托管返还" width="120" align="center" />

          <el-table-column sortable prop="other_money" label="其他收费(应收)" width="150" align="center" />

          <el-table-column sortable prop="other_act_money" label="其他收费(实收)" width="150" align="center" />

          <el-table-column sortable prop="other_lost_money" label="其他收费(欠款)" width="150" align="center" />

          <el-table-column sortable prop="cdffeeOK_ORDER" label="场地费" width="120" align="center" />

          <el-table-column sortable prop="ke1feeOK_ORDER" label="科1费用" width="120" align="center" />
          <el-table-column sortable prop="ke2feeOK_ORDER" label="科2费用" width="120" align="center" />
          <el-table-column sortable prop="ke3feeOK_ORDER" label="科3费用" width="120" align="center" />
          <el-table-column sortable prop="ke4feeOK_ORDER" label="科4费用" width="120" align="center" />

          <el-table-column sortable prop="class" label="班别" width="150" align="center" />

          <el-table-column sortable prop="com_namestr" label="挂靠点" width="150" align="center" />

          <el-table-column sortable prop="ep" label="备注" width="250" align="center" />

          <el-table-column sortable prop="leader" label="科二教练" width="150" align="center" />
          <el-table-column sortable prop="leader2" label="科三教练" width="150" align="center" />

          <el-table-column sortable prop="PrintBai_ORDER" label="申请表(白)" width="150" align="center" />

          <el-table-column sortable prop="printTao_ORDER" label="申请表(套)" width="150" align="center" />

          <el-table-column sortable prop="isReg_ORDER" label="受理" width="120" align="center" />

          <el-table-column sortable prop="isRegDate_ORDER" label="受理日期" width="150" align="center" />

          <el-table-column sortable prop="firstperson" label="建立人" width="150" align="center" />

          <el-table-column sortable prop="firsttime" label="建立日期" width="220" align="center" />

          <el-table-column sortable prop="editer" label="修改人" width="150" align="center" />

          <el-table-column sortable prop="edittime" label="修改日期 " width="200" align="center" />

          <el-table-column sortable prop="time_ORDER" label="报名日期 " width="150" align="center" />

          <el-table-column sortable prop="CustomID" label="自定义ID " width="120" align="center" />

          <el-table-column sortable prop="old_pid" label="PID" width="120" align="center" />

          <el-table-column sortable prop="idaddress" label="身份证地址" width="380" align="center" />

          <el-table-column sortable prop="jsr" label="介绍人" width="150" align="center" />

          <el-table-column sortable prop="zsr" label="招生人" width="150" align="center" />

          <el-table-column sortable prop="IC_ORDER" label="IC卡" width="150" align="center" />

          <el-table-column sortable prop="bxIsBuy_ORDER" label="保险" width="150" align="center" />

          <el-table-column sortable prop="comments" label="批注" width="250" align="center" />

          <el-table-column sortable prop="resits_money" label="补考费类型" width="150" align="center" />

          <el-table-column sortable prop="exam_money" label="考试费类型" width="150" align="center" />

          <el-table-column sortable prop="zlzx" label="资料走向" width="150" align="center" />

          <el-table-column sortable prop="isCon_ORDER" label="集中培训" width="150" align="center" />

          <el-table-column sortable prop="StudyType" label="报考类型" width="150" align="center" />

          <el-table-column sortable prop="needtmp_ORDER" label="居住证" width="150" align="center" />

          <el-table-column sortable prop="text_ORDER" label="补考费类型" width="150" align="center" />

          <el-table-column sortable prop="textBuDate_ORDER" label="考考试费类型" width="150" align="center" />

        </el-table>
      </div>

    </div>

    <!-- 分页 -->
    <div class="pagin">
      <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
        :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { StudentHandlerAPI } from '@/api/adminstare'
import { oldLoginSystem } from '@/utils/publicMethod'
import { mapGetters } from 'vuex'

export default {
  name: 'scheduleIndex',
  data() {
    return {
      active: false,//展开更多
      form: {
        name: '', // 综合
        isExactQuery: true,// 查询模式 0表示模糊查询 1精确查询
        bxIsBuy_ORDER: '0',//保险
      },
      tableData: [],
      labelWidth: '130px',
      tabs: '',
      // 初始化参数
      initParams: {
        page: 1,
        pageSize: 20,
      },
      // 分页总条数
      total: 0,
      studentJin: [
        { label: '全部', name: '0', state: "" },
        { label: '待分进度', name: "1", state: "1" },
        { label: '未受理', name: "2", state: "11" },
        { label: '受理成功', name: "3", state: "12" },
        { label: '退办', name: "4", state: "13" },
        { label: '待科目一', name: "5", state: "20" },
        { label: '待科目二', name: "6", state: "30" },
        { label: '待科目三', name: "7", state: "40" },
        { label: '待科目四', name: "8", state: "50" },
        { label: '毕业', name: "9", state: "60" },
        { label: '无需考试学员', name: "10", state: "90" },
      ],
      state: "",//学员进度的状态
      //控制Table列的显示和隐藏
      columnControls: [
        { name: '性别', show: true, checked: false, disabled: false, },
        { name: '车型', show: true, checked: true, disabled: false, },
        { name: '进度', show: true, checked: true, disabled: false, },
        { name: '状态', show: true, checked: true, disabled: false, },
        { name: '手机', show: true, checked: true, disabled: false, },
        { name: '原有车型', show: true, checked: true, disabled: false, },
        { name: '身份证号', show: true, checked: true, disabled: false, },
        { name: '应收', show: true, checked: true, disabled: false, },
        { name: '实收', show: true, checked: true, disabled: false, },
        { name: '欠款', show: true, checked: true, disabled: false, },
        { name: '优惠金额', show: true, checked: true, disabled: false, },
        { name: '准考证', show: true, checked: true, disabled: false, },
      ],
      isShowTable: true, //控制Table显示和隐藏 解决筛选表格时页面跳动的问题
      isShowScreenPopup: false,//控制筛选弹窗显示和隐藏
      indeterminate: false,
      loading: true,
    }
  },
  mounted() {
    this.getListData()
    this.getStudentJinDuData()
  },
  watch: {
    'columnControls':{ 
      handler(newVal, oldVal) { 
        let newValLeng=0
        newVal.forEach((v, i) => { 
          if (v.checked) {
            newValLeng++
          } else if (!v.checked && newVal >= 0) { 
            newValLeng--
          }
        })  
        newValLeng == newVal.length ?  this.indeterminate = true : this.indeterminate = false

      },
      immediate: true,//立即监视
      deep: true//深度监视
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },

  methods: {
    // 保险下拉框发生变化
    bxHand(e) { 
      // console.log(e);
      this.bxIsBuy_ORDER = e

      this.getListData()
    },
    // 全选
    handleCheckAllChange(val) {
      if (val) {
        this.columnControls.forEach((v, i) => {
          if (!v.checked) { 
            // this.isShowTable = false
            this.columnControls[i].show = true
            this.columnControls[i].checked = true
            /* setTimeout(() => {
              this.isShowTable = true
            }, 10) */
            return
          }
        })
      } else {
        this.columnControls.forEach((v, i) => {
          // this.isShowTable = false
          this.columnControls[i].show = false
          this.columnControls[i].checked = false
          /* setTimeout(() => {
            this.isShowTable = true
          }, 10) */
        })
      }
    },
    //筛选面板中的每个勾选状态发生变化触发
    handleCheckedCitiesChange(index) {
      this.isShowTable = false
      this.columnControls[index].show = !this.columnControls[index].show
      this.columnControls[index].checked = !!this.columnControls[index].checked
      setTimeout(() => {
        this.isShowTable = true
      }, 10)
    },
    // 获取列表数据
    async getListData() {
      let query = { ...this.form, ...this.initParams }
      query.state = this.state
      query.action = 'studentList'
      query.sortStr = 'id desc'

      const result = await StudentHandlerAPI(query)
      this.tableData = result.data

      this.total = result.total
    },
    // 点击切换学员进度事件
    handleClick(tab, event) {
      // 清空筛选条件
      Object.keys(this.form).forEach((key) => {
        this.form[key] = '';
      })

      const index = tab.index

      this.studentJin.forEach((v, i) => {
        if (i == index) {
          this.state = v.state

          this.initParams.page = 1

          this.getListData()
        }
      })
    },

    // 点ID跳旧版
    go(val) {
      const redirectUrl = `http://jx.qida999.com/drivercommon/driver/dr_person.html?aid=${this.userInfo.jxid}&id=${val.ID}&ver=1701044542533`
      const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
      oldLoginSystem(redirectUrl, url)
    },

    // 获取学员进度
    async getStudentJinDuData() {
      const result = await StudentHandlerAPI({ action: 'studentStateList' })

      this.studentJin[0].label += `(${result.data[0].sum}) `//全部
      this.studentJin[1].label += `(${result.data[0].sumstate_1}) `
      this.studentJin[2].label += `(${result.data[0].sumstate_11}) `
      this.studentJin[3].label += `(${result.data[0].sumstate_12}) `
      this.studentJin[4].label += `(${result.data[0].sumstate_13}) `
      this.studentJin[5].label += `(${result.data[0].sumstate_20}) `
      this.studentJin[6].label += `(${result.data[0].sumstate_30}) `
      this.studentJin[7].label += `(${result.data[0].sumstate_40}) `
      this.studentJin[8].label += `(${result.data[0].sumstate_50}) `
      this.studentJin[9].label += `(${result.data[0].sumstate_60}) `
      this.studentJin[10].label += `(${result.data[0].sumstate_90}) `
    },

    // 查询条件
    inquire() {
      this.state = ""
      this.getListData()
    },
    // 当前显示的条数 发生改变时触发
    handleSizeChange(pageSize) {
      this.initParams.pageSize = pageSize || 20
      this.getListData()
    },
    // 当前页码发生改变时触发
    handleCurrentChange(page) {
      this.initParams.page = page || 1
      this.getListData()
    },
    // 清空筛选条件
    clearConditions() {
      Object.keys(this.form).forEach((key) => {
        this.form[key] = '';
      })

      this.getListData()
    }

  }
}
</script>

<style lang="scss" scoped>
.screenPopup {
  // display: flex;
  position: absolute;
  right: 20px;
  text-align: left;
  background-color: #fff;
  z-index: 19;
  border: 1px solid #e8eaec;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
  min-width: 150px;
  // padding-bottom: 50px;

  .item {
    overflow: auto;
    height: 194px;
  }

  .quanxuan {
    width: 100%;
    border-bottom: 1px solid #e8eaec;
    padding: 0 10px;
    padding-bottom: 10px;
    transform: translateY(10px);
    height: 30px;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .screenPopup_btn {
    width: 85%;
    border-top: 1px solid #e8eaec;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    color: #606266;
    padding: 10px 0;
  }

  .screenPopup_btn:hover {
    color: #409EFF;
    cursor: pointer;
  }

}

.item {
  padding: 0 10px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;

}

::v-deep .item .el-checkbox {
  margin-top: 10px;
}

.app-container {
  position: relative;
  background-color: white;
  // height: 90vh;

  .el-form-item {
    margin-bottom: 8px;
  }

  .more {
    position: absolute;
    top: 78px;
    right: 110px;
    cursor: pointer;
    color: #a4b0be;

    .el-icon-arrow-up {
      font-size: 20px;
      transition: transform .3s linear;
    }

    span {
      display: inline-block;
      width: 75px;
      margin-left: 3px;
    }
  }

  .main {
    margin-top: 10px;

    .zy {
      display: flex;
      justify-content: space-between;

      .main_l {
        margin-bottom: 10px;

      }

      .main_r {
        margin-bottom: 10px;

        .el-dropdown {
          margin-left: 10px;
        }

        .el-dropdown:nth-of-type(2) {
          margin-right: 10px;
        }
      }
    }
  }
}

.state-color-0 {
  color: #c0c4cc;
  background-color: #f2f6fc;
}

.state-color-1 {
  background: #faad14;
  border-color: #faad14;
  color: #fff;
}

.state-color-2 {
  background: #f53f3f;
  border-color: #f53f3f;
  color: #fff;
}

.state-color-3 {
  background: #f53f3f;
  border-color: #f53f3f;
  color: #fff;
}

.state-color-9 {
  background: #00b42a;
  border-color: #00b42a;
  color: #fff;
}

.content {
  margin-bottom: 5px;

  .dian {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #909399;
    border-radius: 100%;
    margin-right: 5px;
  }
}

.anima {
  transform: rotate(180deg);
}

.anima2 {
  // translate: transform 10s;
  transform: rotate(0deg);
}

.newState {
  display: flex;
  flex-direction: row;
  justify-content: center;

  .el-tag {
    margin-left: 10px;
  }

}
</style>
